<template>
    <el-dialog
        :visible.sync="dialogVisible"
        width="50%"
       >
       <span slot="title">{{titleArray[types]}}</span>
        <div class="upload-step-box">
            <el-steps  :active="stepStatus" finish-status="success" style="padding: 0 112px;">
                <el-step title="数据读取"></el-step>
                <el-step title="数据预览"></el-step>
                <el-step title="数据处理"></el-step>
            </el-steps>
            <div class="current-component">
                 <LocalForm v-if="stepStatus==1" @nextStep="nextStep" @closeDialog="closeDialog" :types="types"></LocalForm>
                 <DataPreview v-if="stepStatus==2" @prevStep="prevStep" @nextStep="nextStep"></DataPreview>
                 <DataProcessing  v-if="stepStatus==3" @prevStep="prevStep"></DataProcessing>
            </div>
        </div>
        <div slot="footer" class="dialog-footer" style="display:none;">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </div>
     </el-dialog>
</template>
<script>
import LocalForm from './LocalForm'
import DataPreview from './DataPreview'
import DataProcessing from './DataProcessing'
export default {
    name: 'uploadDialog',
    components: {
        LocalForm,
        DataPreview,
        DataProcessing
    },
    props: {
        types: { // 上传类型
            type: Number,
            default: 1
        }
    },
    data () {
        return {
            dialogVisible: false,
            titleArray: [
                '本地文件',
                'HdFS文件'
            ],
            stepStatus: 1
        }
    },
    methods: {
        prevStep (step) {
            this.stepStatus = step
        },
        nextStep (step) {
            this.stepStatus = step
        },
        closeDialog () {
            this.dialogVisible = false
        }
    },
    watch: {
        'dialogVisible' (newValue, oldValue) {
            if (newValue) {
                this.stepStatus = 1
            }
        }
    }
}
</script>
<style>

</style>
